<!DOCTYPE html>
<html lang="zh">
<head>
    <title>我的第一个vue程序</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
</head>
<body>
    <div id="d1">{{msg}}
        {{msg2}}
    </div>

    
    <div id="d2">
        {{msg3}}
    </div>
    <div>--------------------bind绑定---------------------------</div>
    <div id="app3">
         <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息
         </span>
    </div>
    <div>------------------- if判断----------------------------</div>
    <div id="app4">
        <p v-if="myseen">现在你看到我了</p>
    </div>


    <div>------------------- for循环----------------------------</div>
    <div id = "app5">
        <ol>
            <li v-for="l in myList">
                {{l.text}}
            </li>
        </ol>
    </div>
    

    <div>------------------- 处理用户输入----------------------------</div>
    <div id="app6">
        <p>{{message}}</p>
        <button v-on:click="msg"> 反转消息</button>
    </div>

    <div>------------------- v-model----------------------------</div>
    <div id="app7">
            <p>{{msg}}</p>
            <input  v-model="msg">
    </div>

    <div>------------------- vue自定义组件----------------------------</div>
    <div id="app8">
        <ol>
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>

</body>
<script>
    var vue = new Vue({
        el:"#d1",
        data:{
            msg: "hello vue",
            msg2: "hell world"
        },
      
    })

    var vue2 = new Vue({
        el:"#d2",
        data:{
            msg3: "hi"
        }
    })

    //v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。用来绑定dom元素
    var vue3 = new Vue({
        el:"#app3",
        data:{
          message: "页面加载的时间"+new Date().toDateString()
        }
    })
    
    //v-if 判断是否显示
    var vue4 = new Vue({
        el:"#app4",
        data:{
            myseen: true
        }
    })
    //v-for循环
    var vue5 = new Vue({
        el:"#app5",
        data:{
            myList:[
                { text: "学习JavaScript"},
                { text: "学习Vue" },
                { text: "整个牛逼的项目" }
            ]
        }
    })
    //处理用户输入
    var vue6 =new Vue({
        el:"#app6",
        data:{
            message:"hello vue.js"
        },
        methods:{
            msg:function(){
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

    //v-model指令，实现表单输入和应用状态之间的双向绑定
    //改变input值，p标签 msg值也改变了
    var app7 = new Vue({
        el:"#app7",
        data:{
            msg:"hello java"
        }
    })


    //自定义组件
    Vue.component('todo-item',{
        //todo-item组件现在接收一个'prop',类似于一个自定义attribute,这个prop名为todo
        props:['todo'],
        template:'<li>{{todo.text}}</li>'
    })
    var app8 = new Vue({
        el:"#app8",
        data:{
            list:[
               {id:2,text:"蔬菜"},
               {id:3,text:"牛奶"},
               {id:4,text:"苹果2"}
            ]
        }
    })


</script>
</html>